<template>
    <!-- offer 待入职添加 -->
     Insert
    <div>
        <el-form :model="form" ref="form">
            <el-row :gutter="24">
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="offer基本信息" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <!--  -->
            <el-row :gutter="24">
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="选择offer池" label-position="top">
                            <el-button type="primary" style="width: 260px;" @click="JobPopUpWindow"><icon-storage />{{
                                CandidateName }}</el-button>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="所属需求编号" label-position="top"
                            required>
                            <el-input v-model="ResumeRequirements" style="width: 260px;" clearable />
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="简历编号" label-position="top"
                            required>
                            <div class="el-form-item__content">
                                <el-input v-model="TalentResumeID" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人" label-position="top"
                            required>
                            <el-input v-model="ResumeRequirements" style="width: 260px;" clearable />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="发放时间" label-position="top"
                            required>
                            <el-date-picker v-model="DistributionTime" type="datetime" placeholder="选择日期时间"
                                format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="候选人姓名" label-position="top"
                            required>
                            <div class="el-form-item__content">

                                <el-input v-model="CandidateName" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="offer岗位" label-position="top"
                            required>
                            <div class="el-form-item__content">

                                <el-input v-model="Position" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="入职部门" label-position="top"
                            required>
                            <div class="el-form-item__content">
                                <el-input v-model="OnboardingDepartment" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号" label-position="top"
                            required>
                            <div class="el-form-item__content">

                                <el-input v-model="CellPhone" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top" required>
                            <div class="el-form-item__content">

                                <el-input v-model="Mailbox" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期薪酬（元）" label-position="top"
                            required>
                            <div class="el-form-item__content">

                                <el-input v-model="ProbationarySalary" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="转正薪酬（元）" label-position="top"
                            required>
                            <div class="el-form-item__content">

                                <el-input v-model="Salary" style="width: 260px" clearable disabled />
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="报到日期" label-position="top"
                            required>
                            <div class="el-form-item__content">
                                <el-date-picker v-model="ReportedDate" type="datetime" placeholder="选择日期时间"
                                    format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="报道地址报道地址" label-position="top"
                            required>
                            <div class="el-form-item__content">
                                <el-input v-model="ReportingAddress" placeholder="请输入内容" style="width: 260px;"/>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="跟进结果" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="offer状态" label-position="top"
                            required>
                            <div class="el-form-item__content">
                                <el-select v-model="OfferData" placeholder="选择状态" style="width: 260px">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in OfferStatusData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="备注" label-position="top">
                            <el-input clearable style="width: 660px" type="textarea"
                                :autosize="{ minRows: 5, maxRows: 8 }" />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->

            </el-row>
            <div>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="Cancel">取消</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <!--  -->
    <el-dialog title="选择数据" v-model="IntentionDisplay" width="60%" destroy-on-close>

        <el-table :data="IntentionData" border>
            <!-- 单选列 -->
            <el-table-column label="选择" width="60" fixed="left">
                <template #default="scope">
                    <el-radio v-model="selectedRowId" :label="scope.row.id">
                        <span class="radio-custom"></span>
                    </el-radio>
                </template>
            </el-table-column>
            <!-- 固定岗位名称列 -->
            <el-table-column prop="ResumeRequirements" label="需求编号" width="120" fixed="left" />
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
        </el-table>

        <span>
            <el-button @click="IntentionToCancel">取消</el-button>
            <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
        </span>
    </el-dialog>


</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'



const emit = defineEmits(['ref'])
const CandidateName = ref("选择简历数据");//简历数据

const IntentionDisplay = ref(false)
// 意向岗位弹窗
const JobPopUpWindow = () => {
    IntentionDisplay.value = true
}
const DistributionTime = ref("")  // 发放时间
const ReportedDate = ref("")// 报到时间
const selectedRowId = ref(null) // 保存当前选中行

const IntentionData = ref([
    { id: 1, ResumeRequirements: 'JL0001',TalentResumeID:'JL0001',OfferStatus: '待发offer', Position: '程序员', OnboardingDepartment: '开发部门', CandidateName: '结成明日奈', CellPhone: '1008611', Mailbox: '1246@qq.com' },
    { id: 2, ResumeRequirements: 'JL0001',TalentResumeID:'JL0001',OfferStatus: '待发offer', Position: '程序员', OnboardingDepartment: '开发部门', CandidateName: '神刀夜十香', CellPhone: '1008611', Mailbox: '1246@qq.com' },


])// 选择简历数据

const columns = [
    { id: "OfferStatus", label: 'offer状态', width: '160' },
    { id: "CandidateName", label: '姓名', width: '160' },
    { id: "Position", label: '岗位', width: '160' },
    { id: "OnboardingDepartment", label: '部门', width: '160' },
    { id: "CellPhone", label: '手机', width: '160' },
    { id: "Mailbox", label: '邮箱', width: '160' },

]
// 选择简历数据取消
const IntentionToCancel = () => {
    IntentionDisplay.value = false
}

const ResumeRequirements = ref('') // 需求
const TalentResumeID = ref("") //简历编号
const CellPhone = ref("")//手机号
const Mailbox = ref("") // 邮箱
const Position = ref("") //岗位
const OnboardingDepartment = ref("") //部门
const Salary = ref("8000") // 薪资
const ProbationarySalary = ref("5000")
const ReportingAddress = ref(" ") //报到地址
// 简历岗位确定确定
const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.id === selectedRowId.value);
    if (selectedRow) {
        console.log('选中的数据:', selectedRow);
        ResumeRequirements.value = selectedRow.ResumeRequirements;
        TalentResumeID.value = selectedRow.TalentResumeID; //简历编号
        CandidateName.value = selectedRow.CandidateName; // 姓名
        CellPhone.value = selectedRow.CellPhone; // 手机号
        Mailbox.value = selectedRow.Mailbox; // 邮箱
        Position.value = selectedRow.Position;// 职位
        OnboardingDepartment.value = selectedRow.OnboardingDepartment;//部门
    } else {

        ElMessage.error('未找到匹配的行');
    }

    IntentionDisplay.value = false
}

const OfferData = ref() // Offer数据
const OfferStatusData = ref([
    { value: '已入职', label: '已入职' },
    { value: '拒绝offer', label: '拒绝offer' },
    { value: '待入职', label: '待入职' }
])




const form = ref(null)
// 保存
const onSubmit = () => {
    emit('ref')
    ElMessage.success('保存成功')
}
// 取消
const Cancel = () => {
    emit('ref')
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}

.form-footer {
    /* 将元素固定在浏览器视口的底部 */
    position: fixed;
    /* 元素距离底部 0 像素 */
    bottom: 0;
    /* 元素距离左侧 0 像素（占据整个水平方向） */
    left: 0;
    /* 元素宽度为视口的 100% */
    width: 100%;
    /* 设置白色背景色，防止内容穿透 */
    background-color: #ffffff;
    /* 设置 z-index 层级为 999，确保页脚始终显示在其他元素之上 */
    z-index: 999;
    /* 内边距为 10px*/
    padding: 10px;
    /* 添加阴影效果：水平偏移0，垂直偏移2px，模糊半径12px，颜色为半透明黑色 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>
